<template>
	<view class="" style="overflow: hidden;">

			<view class="left" @tap.stop="back">
				<image src="@/static/home/left.png" mode=""></image>
			</view>
			<view class="textName">
				扫码详情
			</view>
		
		<view class="home" >
			<view class="index-top">
				<view class="" style="display: flex;">
					<view class="imgBig">
						<view class="imgItem" v-for="(i,index) in imgList" :key="index">
							<view class="pic" >
								<image :src="i.url" mode="widthFix"></image>
							</view>
							<view class="tex" >
								{{i.text}}
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="listBox">
				<view class="list" >
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="code">
							{{list.deviceName}}
						</view>
					</view>
					<view class="list_t">
						<view class="" style="display: flex;margin: 10rpx 0;">
							<view class="name" style="width: 38%;">日期</view>
							<view class="name" style="width: 61%;">定值单号</view>
						</view>
						<view class="list_t_r" v-for="(i,ind) in list.protectList"  :key="ind">
							<view class="" v-for="(item,p) in i.version" :key="p" style="display: flex;height: 60rpx;line-height: 60rpx;" @tap.stop="toParameterDetails(list.deviceId,item.id,i.protectDeviceId)">
								<view class="specifications"  style="width: 38%;">{{item.fileDate}}</view>
								<view class="specifications" style="width: 61%;">{{item.fileNo}}</view>
								<view class="" v-if="!item.fileDate">
									暂无
								</view>
							</view>
							<view style="width: 100%;height: 2rpx;background: #D9D9D9;margin-top: 6rpx;" v-if="ind!= (list.protectList.length-1)"></view>
						</view>
					</view>
				</view>
					<!-- 提示栏 -->
					<!-- <view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view> -->
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				showV:false,
				e: null,
				inviter_id: 'xxx',
				height: this.$utils.height(),
				image: this.$base.smallimgUrl,
				swiperList: [],
				// isImg:true,
				advert:'',
				bannerList:[],
				bigImg:this.$base.imgUrl,
				is_open: 0,
				t:'',
				list: {},
				homelist: ['暂无'],
				mesList:[],
				imgList:[
					{
						url:'/static/home/f1.png',
					},
					{
						url:'/static/home/f2.png',
					},
					{
						url:'/static/home/f3.png',
					},
					{
						url:'/static/home/f4.png',
					},
				],
				show:false,
				count:'',
				pageViewList:[],
				antiFakeCode:'',
				barCode:'',
				yhDetailsId:'',
				hasCode: false,
				statusBarHeight: 50,
				isTriggered: false, //定义一个用来表示下拉刷新是否被触发，当更新完数据需要重新定义为false
				form: {
					page: 1
				},
				ef:'',
			};
		},
		created() {
			let systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
		},
		onReady() {
			this.height = uni.getSystemInfoSync().windowHeight - 136 + 'px';
		},
		onLoad(e) {
			if(e.q&&e.q!="undefined"){//扫码进入
				const qrUrl = decodeURIComponent(e.q) // 获取到二维码原始链接内容
				//GetWxMiniProgramUrlParam() 这个方法是解析链接地址中的参数方法
				e = this.GetWxMiniProgramUrlParam(qrUrl);//此处就是我们要获取的参数 json
				console.log(e,'eeee1111111111')
				//比如我要得到inviter_id的值，直接取值即可
				uni.setStorageSync('inviter_id',e.inviter_id)
				this.t = uni.getStorageSync('inviter_id')
			}
			if(e.inviter_id){
				uni.setStorageSync('inviter_id',e.inviter_id)
			}
			if(e.scene){
				uni.setStorageSync('scene',e.scene)
			}
			// uni.hideTabBar()
			this.ef = JSON.parse(e.data)
			
			this.scanQrCode()
			// this.showImg()
			
		},
		onShow() {

		},
		methods: {	
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			scanQrCode(){
				let that = this
				that.$api.scanQrCode(
					that.ef
				).then(res => {
					that.list = res.data.data
					that.imgList[0].text = that.list.areaName ||'暂无'
					that.imgList[1].text = that.list.substationName ||'暂无'
					that.imgList[2].text = that.list.voltageLevelValue||'暂无'
					that.imgList[3].text = that.list.deviceName ||'暂无'
					console.log(that.list,'that.list')
				})
			},
			toParameterDetails(a,b,c){
				uni.navigateTo({
					url:`/pages/tabBar/parameterDetails/parameterDetails?deviceId=${a}&versionId=${b}&protectDeviceId=${c}`
				})
			},
			toCode(){
				let that = this
				uni.scanCode({
					success: function(res) {	
						// that.barCode = res.result
						// console.log(res.result,'that.toCode')
						if(res.result){
							setTimeout(()=>{
								that.$utils.toast('扫码成功')
							},1000)
							setTimeout(()=>{
								that.hasCode = true
							},2000)
							
						}
						// that.$api.checkBarCode({
						// 	barCode:that.barCode
						// }).then(res => {
						// 	console.log(res.data,'res')
						// 	that.mesList = res.data.data
						// 	that.yhDetailsId = res.data.data.id
						// 	that.show = true
						// })
					}
				});
				
			},	
			receiveSure(){
				let that = this
				if(!that.antiFakeCode) return that.$utils.toast('防伪码不能为空')
				that.$api.scanCodeAdd({
					antiFakeCode:that.antiFakeCode,
					barCode:that.barCode,
					yhDetailsId:that.yhDetailsId
				}).then(res => {
					that.show = false
					
					if(res.data.code == 200){
						uni.showToast({
							title: '回收成功！',
							icon: 'none',
							duration: 2500
						})
						
					}
				})
			},
			// 跳转
			toDetail(url){
				if(url){
					uni.navigateTo({
						url:url
					})
				}else{
					this.showV = true
				}
				
				
			},
			GetWxMiniProgramUrlParam (url) {
			  let theRequest = {};
			  if(url.indexOf("#") != -1){
				  const str=url.split("#")[1];
				  const strs=str.split("&");
				  for (let i = 0; i < strs.length; i++) {
				  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				  }
			  }else if(url.indexOf("?") != -1){
				  const str=url.split("?")[1];
				  const strs=str.split("&");
				  for (let i = 0; i < strs.length; i++) {
				  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				  }
			  }
			  return theRequest;
			  },

			showImg(){
				let that = this
				
				that.$api.advert().then(res => {
					this.advert = res.data.data.img
					this.is_open = res.data.data.is_open
					if(this.is_open != 1){
						this.isImg = false
						uni.reLaunch({
							url:'/pages/check/check'
						})
					}else{
						setTimeout(()=>{
							this.isImg = false
							uni.showTabBar()
						},3000)
					}
				})
			
			},
			// 生成pk活动
			activity(){
				let that = this
				that.$api.pkIndexCreate().then(res => {
					uni.navigateTo({
						url: '/pages/pk/pk?active_id=' + res.data.data.active_id
					})
				})
			},
			
			// 
			goShop(){
				let that = this
				uni.switchTab({
					url: '/pages/tabBar/shop/shop'
				})
			},
			
		}
	}
</script>

<style lang="less">
		
	page{
		// background-color: #babab8;
		

	}
	.left {
		top: 4%;
		left: 4%;
		position: fixed;
	
		image {
			width: 22rpx;
			height: 35rpx;
		}
	}
	.textName{
		top: 3%;
		left: 34%;
		position: fixed;
		color: #000 !important;
		font-size: 34rpx;
	}
	::v-deep .search .u-search__action {
		color: #00C777
	}
	::v-deep .search .u-icon {
		position: absolute;
		height: 40rpx;
		width: 40rpx;
		padding: 8rpx;
		color: #777e81 !important;
		right: 36rpx;
		bottom: 6rpx;
		z-index: 9999;
	}
	::v-deep .pic button::after{
		border: none;
		background-color: transparent;
		outline: none;    
	}
	.current {
		background: url();
		// background: url(../../static/selectBot.png);
		background-size: 100% 100%;
		height: 900px;
		background-repeat: no-repeat;
		position: fixed;
		top: -30px;
		overflow: hidden;
		left: 0;
		width: 100%;
	}
	.textName{
		top: 3%;
		left: 40%;
		position: fixed;
		color: #000;
		font-size: 34rpx;
	}
	.list{
		width: 100%;
		height: auto;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx auto;
			
		.rece{
			width: 22%;
			height: 60rpx;
			background: #979797;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			border-radius: 6rpx;
			margin-top: 80rpx;
		}
		.code{
			color: #000;
			font-weight: 600;
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 14rpx;
		}
		.list_t{
			border-top: 1px solid #F9F9F9;
			padding: 10rpx 0;
			image{
				width: 170rpx;
				height: 220rpx;
				margin-right: 30rpx;
			}
				
			::v-deep .u-form-item{
				padding-top: 0 !important;
				width: 70%;
			}
			.list_t_r{
				width: 100%;
				.list_t_r_t{
					font-size: 28rpx;
					font-weight: 400;
					.name{
						margin-top: 10rpx;
					}
					.state{
						color: #7F8084;
					}
				}
				.specifications{
					font-size: 26rpx;
					font-weight: 400;
					color: #979797;
					margin: 8rpx 0;
				}
				.time{
					font-size: 24rpx;
					font-weight: 400;
					color: #979797;
					margin: 20rpx 0;
				}
			}
		}
		.list_b{
			font-size: 28rpx;
			font-weight: 400;
			color: #7F8084;
			padding-top: 30rpx;
			.text{
				.money{
					display: inline-block;
					font-size: 32rpx;
					font-weight: 600;
					color: #000;
				}
			}
		}
		
		.btnBox{
			width: 100%;
			margin-top: 30rpx;
			flex-direction: row-reverse !important;
			.btn{
				width: 132rpx;
				height: 46rpx;
				line-height: 46rpx;
				border-radius: 46rpx;
				text-align: center;
				background-color: #000;
				color: #fff;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
		
	}

	
	.home{
		width: 100vw;
		// height: 100vh;
		overflow-x: hidden;
		background: #fff;
		margin-top: 120rpx;
		.index-top {
			width: 100%;
		}
		.search {
			position: relative;
			padding: 0 20rpx;
			width: 100%;
			height: 68rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			min-height: 28px;
		}
		
		.topSearch {
			border: 1px solid #ccc;
			border-radius: 10px;
			height: 78rpx;
			line-height: 78rpx;
			// display: inherit;
			padding: 0 80rpx;
			color: #F5F5F5;
			padding-right: 80rpx;
			background: #fff;
			width: 100%;
		}
		.select_icon{
			width:80rpx;
			height: 70rpx;
			margin: 30rpx auto;
			// border: 1px solid gray;
			text-align: center;
			image{
				width: 27rpx;
				height: 25rpx;
				margin: 12rpx 10rpx 1rpx 10rpx;
			}
			view{
				font-size: 20rpx;
				color: #fff;
			}
		}
		
		.selectTop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;
			margin-left: 30rpx;
			padding: 20rpx 40rpx;
			// background: #fff;
			// border-bottom: 1px solid #E2E2E2;
			color: #979797;
			font-size: 24rpx;
			position: relative;
			width: 68%;
			background: #fff;
			height: 34rpx;
			height: 34rpx;
			border-radius: 20rpx;
			.line{
				width: 2rpx;
				height: 34rpx;
				line-height: 34rpx;
				background: gainsboro;
			}
			.item {
				width: 35%;
				display: flex;
				// background: #F5F5F5;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 60px;
				padding: 15rpx;
		
				.select {
					flex: 1;
				}
		
				.arrow {
					width: 20rpx;
					height: 14rpx;
					margin-right: 8rpx;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
		.searchBtn,.searchBtn2 {
			position: absolute;
			height: 46rpx;
			width: 46rpx;
			padding: 8rpx;
			bottom: 18rpx;
		}
		.searchBtn{
			left: 36rpx;
		}
		.searchBtn2 {
			right: 36rpx;
		}
		
		.one{
			width: 34%;
			height: 9%;
			position: absolute;
			z-index: 1000;
			top: 9.4%;
			left: 62%;
			color: transparent;
			// border: 1px solid black;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.logoBox{
			width: 92rpx;
			margin-left: 50rpx;
		}
		.imgBig{
			margin:10rpx;
			display: flex;
			flex-wrap: wrap;
			.imgItem{
				width: 334rpx;
				height: 120rpx;
				border-radius: 10rpx;
				text-align: center;
				vertical-align: center;
				padding:20rpx;
				margin:16rpx;
				background:#fff;
				display: flex;
				-moz-box-shadow: 0 0 10px #CCC;
				-webkit-box-shadow: 0 0 10px #CCC;
				box-shadow: 0 0 10px #CCC;
				.pic{
					width: 53rpx !important;
					height: 50rpx !important; 
					// border: 1px solid green;
					margin: 16rpx;
					image{
						width: 43rpx !important;
						height: 40rpx !important; 
					}
				}
				.tex{
					margin: 16rpx 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		.swiper{
			width: 90%;
			height: 136rpx;
			background: #fff;
			margin: 10rpx auto 20rpx;
			border-radius: 24rpx;
			position: absolute;
			bottom: 10rpx;
			left: 40rpx;
			z-index: 10;
			.textBox{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				.imgBox{
					width: 70rpx !important;
					height: 70rpx !important;
					border-radius: 50%;
					overflow: hidden;
					margin-right:4rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.text{
					font-size: 24rpx;
					font-weight: 400;
					margin-left: 8rpx;
					margin-right: 6rpx;
					flex: 1;
				}
			}
		}
		.contentBox{
			width: 100%;

			.imageBox {
				width: 92%;
				margin: 20rpx 30rpx;
				position: absolute;
				left: 0;
				top: 55%;
				z-index: 1;
			}
			.other{
				margin: 30rpx 30rpx 0;
				width: 140rpx;
			}
		}
	}
	
		
	::v-deep .imageBox swiper{
		height: 70vh !important;
	}
	.listBox{
			width: 100%;
			padding: 0rpx 30rpx;
			.list{
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				-moz-box-shadow: 0 0 10px #CCC;
				-webkit-box-shadow: 0 0 10px #CCC;
				box-shadow: 0 0 10px #CCC;
				.code{
					font-weight: 400;
					line-height: 30px;
					margin-bottom: 14rpx;
					color: #469D96;
					font-size: 34rpx;
				}
				.list_t{
					border-top: 1px solid #F9F9F9;
					font-size: 32rpx;
					padding: 10rpx 0;
					image{
						width: 120rpx;
						height: 120rpx;
					}
					.list_t_r{
						width: 100%;
						font-size: 30rpx;
							
						.name{
							height: 80rpx;
							line-height: 80rpx;
						}
						.specifications{
							font-size: 28rpx;
							font-weight: 400;
							color: #979797;
							margin:8rpx 0;
							overflow:hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow:ellipsis;
						}
						.time{
							font-size: 24rpx;
							font-weight: 400;
							color: #979797;
							margin: 20rpx 0;
						}
					}
				}
				.list_b{
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
					padding-top: 30rpx;
					.text{
						.money{
							display: inline-block;
							font-size: 32rpx;
							font-weight: 600;
							color: #000;
						}
					}
				}
				
				.btnBox{
					width: 100%;
					margin-top: 30rpx;
					flex-direction: row-reverse !important;
					.btn{
						width: 132rpx;
						height: 46rpx;
						line-height: 46rpx;
						border-radius: 46rpx;
						text-align: center;
						background-color: #000;
						color: #fff;
						font-size: 24rpx;
						font-weight: 500;
					}
				}
				
			}
		}
	.scrollHight {
		height: 100%;
		z-index: 10;
		overflow: hidden;
	}
</style>
